<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">

    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width,initial-scale=1">
    <title>API 参考 | Vuex</title>
    <meta name="description" content="Vue.js 的中心化状态管理方案">
    <link rel="icon" href="logo.png">
  <link rel="apple-touch-icon" href="https://vuex.vuejs.org/icons/apple-touch-icon-152x152.png">
  <link rel="mask-icon" href="https://vuex.vuejs.org/icons/safari-pinned-tab.svg" color="#3eaf7c">
  <meta name="msapplication-TileImage" content="/icons/msapplication-icon-144x144.png">
    
    <link rel="preload" href="https://vuex.vuejs.org/assets/css/0.styles.04c31208.css" as="style"><link rel="preload" href="https://vuex.vuejs.org/assets/js/app.92019be7.js" as="script"><link rel="preload" href="https://vuex.vuejs.org/assets/js/98.44547c3f.js" as="script"><link rel="prefetch" href="https://vuex.vuejs.org/assets/js/10.9ff0229a.js"><link rel="prefetch" href="https://vuex.vuejs.org/assets/js/100.ff89a77e.js"><link rel="prefetch" href="https://vuex.vuejs.org/assets/js/101.75e31694.js"><link rel="prefetch" href="https://vuex.vuejs.org/assets/js/102.9eb5b6b9.js"><link rel="prefetch" href="https://vuex.vuejs.org/assets/js/103.84f39ee4.js"><link rel="prefetch" href="https://vuex.vuejs.org/assets/js/104.1d8f5eda.js"><link rel="prefetch" href="https://vuex.vuejs.org/assets/js/105.22d02a0b.js"><link rel="prefetch" href="https://vuex.vuejs.org/assets/js/106.6c7f9f4f.js"><link rel="prefetch" href="https://vuex.vuejs.org/assets/js/107.df69838a.js"><link rel="prefetch" href="https://vuex.vuejs.org/assets/js/108.57710a8f.js"><link rel="prefetch" href="https://vuex.vuejs.org/assets/js/109.0b9350df.js"><link rel="prefetch" href="https://vuex.vuejs.org/assets/js/11.22ec5291.js"><link rel="prefetch" href="https://vuex.vuejs.org/assets/js/110.da276e13.js"><link rel="prefetch" href="https://vuex.vuejs.org/assets/js/111.d271062b.js"><link rel="prefetch" href="https://vuex.vuejs.org/assets/js/112.fff28bd3.js"><link rel="prefetch" href="https://vuex.vuejs.org/assets/js/12.4bb08316.js"><link rel="prefetch" href="https://vuex.vuejs.org/assets/js/13.eb7734ad.js"><link rel="prefetch" href="https://vuex.vuejs.org/assets/js/14.189de3ec.js"><link rel="prefetch" href="https://vuex.vuejs.org/assets/js/15.96301577.js"><link rel="prefetch" href="https://vuex.vuejs.org/assets/js/16.d35e6c41.js"><link rel="prefetch" href="https://vuex.vuejs.org/assets/js/17.6932f877.js"><link rel="prefetch" href="https://vuex.vuejs.org/assets/js/18.14d47735.js"><link rel="prefetch" href="https://vuex.vuejs.org/assets/js/19.f57a3619.js"><link rel="prefetch" href="https://vuex.vuejs.org/assets/js/20.4b3b43ce.js"><link rel="prefetch" href="https://vuex.vuejs.org/assets/js/21.fdbf3e9a.js"><link rel="prefetch" href="https://vuex.vuejs.org/assets/js/22.38a06d07.js"><link rel="prefetch" href="https://vuex.vuejs.org/assets/js/23.20e52ca0.js"><link rel="prefetch" href="https://vuex.vuejs.org/assets/js/24.38c1ec6f.js"><link rel="prefetch" href="https://vuex.vuejs.org/assets/js/25.d0749285.js"><link rel="prefetch" href="https://vuex.vuejs.org/assets/js/26.fa0199ca.js"><link rel="prefetch" href="https://vuex.vuejs.org/assets/js/27.104f01d5.js"><link rel="prefetch" href="https://vuex.vuejs.org/assets/js/28.0502b1eb.js"><link rel="prefetch" href="https://vuex.vuejs.org/assets/js/29.a3deb738.js"><link rel="prefetch" href="https://vuex.vuejs.org/assets/js/3.c2431962.js"><link rel="prefetch" href="https://vuex.vuejs.org/assets/js/30.5f61f97c.js"><link rel="prefetch" href="https://vuex.vuejs.org/assets/js/31.c13e234c.js"><link rel="prefetch" href="https://vuex.vuejs.org/assets/js/32.3346e47e.js"><link rel="prefetch" href="https://vuex.vuejs.org/assets/js/33.9552f2b4.js"><link rel="prefetch" href="https://vuex.vuejs.org/assets/js/34.22c87151.js"><link rel="prefetch" href="https://vuex.vuejs.org/assets/js/35.e274dae2.js"><link rel="prefetch" href="https://vuex.vuejs.org/assets/js/36.1f72edfe.js"><link rel="prefetch" href="https://vuex.vuejs.org/assets/js/37.3c8f5a6b.js"><link rel="prefetch" href="https://vuex.vuejs.org/assets/js/38.18505477.js"><link rel="prefetch" href="https://vuex.vuejs.org/assets/js/39.fa1ab3f0.js"><link rel="prefetch" href="https://vuex.vuejs.org/assets/js/4.6114c173.js"><link rel="prefetch" href="https://vuex.vuejs.org/assets/js/40.82b0bf0f.js"><link rel="prefetch" href="https://vuex.vuejs.org/assets/js/41.83249a92.js"><link rel="prefetch" href="https://vuex.vuejs.org/assets/js/42.dedbcb2b.js"><link rel="prefetch" href="https://vuex.vuejs.org/assets/js/43.1626a294.js"><link rel="prefetch" href="https://vuex.vuejs.org/assets/js/44.46f3ccfa.js"><link rel="prefetch" href="https://vuex.vuejs.org/assets/js/45.5e63c438.js"><link rel="prefetch" href="https://vuex.vuejs.org/assets/js/46.4837dfdd.js"><link rel="prefetch" href="https://vuex.vuejs.org/assets/js/47.507f6518.js"><link rel="prefetch" href="https://vuex.vuejs.org/assets/js/48.56ef6c75.js"><link rel="prefetch" href="https://vuex.vuejs.org/assets/js/49.14767935.js"><link rel="prefetch" href="https://vuex.vuejs.org/assets/js/5.fea3e8c1.js"><link rel="prefetch" href="https://vuex.vuejs.org/assets/js/50.a2cf5518.js"><link rel="prefetch" href="https://vuex.vuejs.org/assets/js/51.9a6f14ab.js"><link rel="prefetch" href="https://vuex.vuejs.org/assets/js/52.21aa240c.js"><link rel="prefetch" href="https://vuex.vuejs.org/assets/js/53.a7ca4e09.js"><link rel="prefetch" href="https://vuex.vuejs.org/assets/js/54.18643ae3.js"><link rel="prefetch" href="https://vuex.vuejs.org/assets/js/55.48be8fde.js"><link rel="prefetch" href="https://vuex.vuejs.org/assets/js/56.8123f4e5.js"><link rel="prefetch" href="https://vuex.vuejs.org/assets/js/57.3f666e3d.js"><link rel="prefetch" href="https://vuex.vuejs.org/assets/js/58.a7e61993.js"><link rel="prefetch" href="https://vuex.vuejs.org/assets/js/59.8be4dcd4.js"><link rel="prefetch" href="https://vuex.vuejs.org/assets/js/6.e165131f.js"><link rel="prefetch" href="https://vuex.vuejs.org/assets/js/60.b6d2d182.js"><link rel="prefetch" href="https://vuex.vuejs.org/assets/js/61.eca98d13.js"><link rel="prefetch" href="https://vuex.vuejs.org/assets/js/62.5ee1323a.js"><link rel="prefetch" href="https://vuex.vuejs.org/assets/js/63.c36ff790.js"><link rel="prefetch" href="https://vuex.vuejs.org/assets/js/64.b063e22d.js"><link rel="prefetch" href="https://vuex.vuejs.org/assets/js/65.d5a56cb7.js"><link rel="prefetch" href="https://vuex.vuejs.org/assets/js/66.32060737.js"><link rel="prefetch" href="https://vuex.vuejs.org/assets/js/67.7b1f4ad9.js"><link rel="prefetch" href="https://vuex.vuejs.org/assets/js/68.61c1fb5a.js"><link rel="prefetch" href="https://vuex.vuejs.org/assets/js/69.9eecf973.js"><link rel="prefetch" href="https://vuex.vuejs.org/assets/js/7.6a20bd14.js"><link rel="prefetch" href="https://vuex.vuejs.org/assets/js/70.5012a640.js"><link rel="prefetch" href="https://vuex.vuejs.org/assets/js/71.76c479ea.js"><link rel="prefetch" href="https://vuex.vuejs.org/assets/js/72.25f5be51.js"><link rel="prefetch" href="https://vuex.vuejs.org/assets/js/73.d31aea65.js"><link rel="prefetch" href="https://vuex.vuejs.org/assets/js/74.98a6bff3.js"><link rel="prefetch" href="https://vuex.vuejs.org/assets/js/75.fa397fe2.js"><link rel="prefetch" href="https://vuex.vuejs.org/assets/js/76.8b008b0b.js"><link rel="prefetch" href="https://vuex.vuejs.org/assets/js/77.280e8204.js"><link rel="prefetch" href="https://vuex.vuejs.org/assets/js/78.ba855657.js"><link rel="prefetch" href="https://vuex.vuejs.org/assets/js/79.58af331f.js"><link rel="prefetch" href="https://vuex.vuejs.org/assets/js/8.259b04b8.js"><link rel="prefetch" href="https://vuex.vuejs.org/assets/js/80.a0635feb.js"><link rel="prefetch" href="https://vuex.vuejs.org/assets/js/81.762ec5d1.js"><link rel="prefetch" href="https://vuex.vuejs.org/assets/js/82.0d4604b1.js"><link rel="prefetch" href="https://vuex.vuejs.org/assets/js/83.9d064f79.js"><link rel="prefetch" href="https://vuex.vuejs.org/assets/js/84.72918f87.js"><link rel="prefetch" href="https://vuex.vuejs.org/assets/js/85.0d9821f3.js"><link rel="prefetch" href="https://vuex.vuejs.org/assets/js/86.1631e292.js"><link rel="prefetch" href="https://vuex.vuejs.org/assets/js/87.6c6ced24.js"><link rel="prefetch" href="https://vuex.vuejs.org/assets/js/88.c8dfc6b4.js"><link rel="prefetch" href="https://vuex.vuejs.org/assets/js/89.3e00d819.js"><link rel="prefetch" href="https://vuex.vuejs.org/assets/js/9.e8b16084.js"><link rel="prefetch" href="https://vuex.vuejs.org/assets/js/90.cd40ed9e.js"><link rel="prefetch" href="https://vuex.vuejs.org/assets/js/91.71809249.js"><link rel="prefetch" href="https://vuex.vuejs.org/assets/js/92.aba0a727.js"><link rel="prefetch" href="https://vuex.vuejs.org/assets/js/93.c9b387fd.js"><link rel="prefetch" href="https://vuex.vuejs.org/assets/js/94.5be4c560.js"><link rel="prefetch" href="https://vuex.vuejs.org/assets/js/95.a52fb380.js"><link rel="prefetch" href="https://vuex.vuejs.org/assets/js/96.74307a3e.js"><link rel="prefetch" href="https://vuex.vuejs.org/assets/js/97.0738b41c.js"><link rel="prefetch" href="https://vuex.vuejs.org/assets/js/99.9a86824d.js"><link rel="prefetch" href="https://vuex.vuejs.org/assets/js/vendors~docsearch.0cca2532.js">
    
  
<link rel="stylesheet" type="text/css" href="default_001.css" media="all">
</head>
<body>
    <div id="app" data-server-rendered="true"><div class="theme-container"><header class="navbar"><div class="sidebar-button"><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" role="img" viewBox="0 0 448 512" class="icon"><path fill="currentColor" d="M436 124H12c-6.627 0-12-5.373-12-12V80c0-6.627 5.373-12 12-12h424c6.627 0 12 5.373 12 12v32c0 6.627-5.373 12-12 12zm0 160H12c-6.627 0-12-5.373-12-12v-32c0-6.627 5.373-12 12-12h424c6.627 0 12 5.373 12 12v32c0 6.627-5.373 12-12 12zm0 160H12c-6.627 0-12-5.373-12-12v-32c0-6.627 5.373-12 12-12h424c6.627 0 12 5.373 12 12v32c0 6.627-5.373 12-12 12z"></path></svg></div> <a indepth="true" href="index.html" class="home-link router-link-active"><!----> <span class="site-name">Vuex</span></a> <div class="links" style="max-width:nullpx;"><form action="https://vuex.vuejs.org/zh/api/" id="search-form" class="algolia-search-wrapper search-box"><input value="" id="algolia-search-input" class="search-query"></form> <nav class="nav-links can-hide"><div class="nav-item"><a indepth="true" href="default.html" class="nav-link">指南</a></div><div class="nav-item"><a indepth="true" href="default_001.html" class="nav-link router-link-exact-active router-link-active">API 参考</a></div><div class="nav-item"><a href="https://github.com/vuejs/vuex/releases" target="_top" rel="noopener noreferrer" class="nav-link external">
  更新记录
  <svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg></a></div><div class="nav-item"><div class="dropdown-wrapper"><a class="dropdown-title"><span class="title">选择语言</span> <span class="arrow right"></span></a> <ul class="nav-dropdown" style="display: none;"><li class="dropdown-item"><!----> <a href="https://vuex.vuejs.org/api/" class="nav-link">English</a></li><li class="dropdown-item"><!----> <a indepth="true" href="default_001.html" class="nav-link router-link-exact-active router-link-active">简体中文</a></li><li class="dropdown-item"><!----> <a href="https://vuex.vuejs.org/ja/api/" class="nav-link">日本語</a></li><li class="dropdown-item"><!----> <a href="https://vuex.vuejs.org/ru/api/" class="nav-link">Русский</a></li><li class="dropdown-item"><!----> <a href="https://vuex.vuejs.org/kr/api/" class="nav-link">한국어</a></li><li class="dropdown-item"><!----> <a href="https://vuex.vuejs.org/ptbr/api/" class="nav-link">Português</a></li><li class="dropdown-item"><!----> <a href="https://vuex.vuejs.org/fr/api/" class="nav-link">Français</a></li></ul></div></div> <a href="https://github.com/vuejs/vuex" target="_top" rel="noopener noreferrer" class="repo-link">
    GitHub
    <svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg></a></nav></div></header> <div class="sidebar-mask"></div> <div class="sidebar"><nav class="nav-links"><div class="nav-item"><a indepth="true" href="default.html" class="nav-link">指南</a></div><div class="nav-item"><a indepth="true" href="default_001.html" class="nav-link router-link-exact-active router-link-active">API 参考</a></div><div class="nav-item"><a href="https://github.com/vuejs/vuex/releases" target="_top" rel="noopener noreferrer" class="nav-link external">
  更新记录
  <svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg></a></div><div class="nav-item"><div class="dropdown-wrapper"><a class="dropdown-title"><span class="title">选择语言</span> <span class="arrow right"></span></a> <ul class="nav-dropdown" style="display: none;"><li class="dropdown-item"><!----> <a href="https://vuex.vuejs.org/api/" class="nav-link">English</a></li><li class="dropdown-item"><!----> <a indepth="true" href="default_001.html" class="nav-link router-link-exact-active router-link-active">简体中文</a></li><li class="dropdown-item"><!----> <a href="https://vuex.vuejs.org/ja/api/" class="nav-link">日本語</a></li><li class="dropdown-item"><!----> <a href="https://vuex.vuejs.org/ru/api/" class="nav-link">Русский</a></li><li class="dropdown-item"><!----> <a href="https://vuex.vuejs.org/kr/api/" class="nav-link">한국어</a></li><li class="dropdown-item"><!----> <a href="https://vuex.vuejs.org/ptbr/api/" class="nav-link">Português</a></li><li class="dropdown-item"><!----> <a href="https://vuex.vuejs.org/fr/api/" class="nav-link">Français</a></li></ul></div></div> <a href="https://github.com/vuejs/vuex" target="_top" rel="noopener noreferrer" class="repo-link">
    GitHub
    <svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg></a></nav> <div class="carbon-ads"></div> <ul class="sidebar-links"><li><div class="sidebar-group first"><p class="sidebar-heading open"><span>API 参考</span> <!----></p> <ul class="sidebar-group-items"><li><a indepth="true" href="default_001.html#vuex-store" class="sidebar-link">Vuex.Store</a><ul class="sidebar-sub-headers"></ul></li><li><a indepth="true" href="default_001.html#vuex-store-æé&nbsp;å¨éé¡¹" class="sidebar-link">Vuex.Store 构造器选项</a><ul class="sidebar-sub-headers"><li class="sidebar-sub-header"><a indepth="true" href="default_001.html#state" class="sidebar-link">state</a></li><li class="sidebar-sub-header"><a indepth="true" href="default_001.html#mutations" class="sidebar-link">mutations</a></li><li class="sidebar-sub-header"><a indepth="true" href="default_001.html#actions" class="sidebar-link">actions</a></li><li class="sidebar-sub-header"><a indepth="true" href="default_001.html#getters" class="sidebar-link">getters</a></li><li class="sidebar-sub-header"><a indepth="true" href="default_001.html#modules" class="sidebar-link">modules</a></li><li class="sidebar-sub-header"><a indepth="true" href="default_001.html#plugins" class="sidebar-link">plugins</a></li><li class="sidebar-sub-header"><a indepth="true" href="default_001.html#strict" class="sidebar-link">strict</a></li><li class="sidebar-sub-header"><a indepth="true" href="default_001.html#devtools" class="sidebar-link">devtools</a></li></ul></li><li><a indepth="true" href="default_001.html#vuex-store-å®ä¾å±æ§" class="sidebar-link">Vuex.Store 实例属性</a><ul class="sidebar-sub-headers"><li class="sidebar-sub-header"><a indepth="true" href="default_001.html#state-2" class="sidebar-link">state</a></li><li class="sidebar-sub-header"><a indepth="true" href="default_001.html#getters-2" class="sidebar-link">getters</a></li></ul></li><li><a indepth="true" href="default_001.html#vuex-store-å®ä¾æ¹æ³" class="sidebar-link">Vuex.Store 实例方法</a><ul class="sidebar-sub-headers"><li class="sidebar-sub-header"><a indepth="true" href="default_001.html#commit" class="sidebar-link">commit</a></li><li class="sidebar-sub-header"><a indepth="true" href="default_001.html#dispatch" class="sidebar-link">dispatch</a></li><li class="sidebar-sub-header"><a indepth="true" href="default_001.html#replacestate" class="sidebar-link">replaceState</a></li><li class="sidebar-sub-header"><a indepth="true" href="default_001.html#watch" class="sidebar-link">watch</a></li><li class="sidebar-sub-header"><a indepth="true" href="default_001.html#subscribe" class="sidebar-link">subscribe</a></li><li class="sidebar-sub-header"><a indepth="true" href="default_001.html#subscribeaction" class="sidebar-link">subscribeAction</a></li><li class="sidebar-sub-header"><a indepth="true" href="default_001.html#registermodule" class="sidebar-link">registerModule</a></li><li class="sidebar-sub-header"><a indepth="true" href="default_001.html#unregistermodule" class="sidebar-link">unregisterModule</a></li><li class="sidebar-sub-header"><a indepth="true" href="default_001.html#hotupdate" class="sidebar-link">hotUpdate</a></li></ul></li><li><a indepth="true" href="default_001.html#ç»ä»¶ç»å®çè¾å©å½æ°" class="sidebar-link">组件绑定的辅助函数</a><ul class="sidebar-sub-headers"><li class="sidebar-sub-header"><a indepth="true" href="default_001.html#mapstate" class="sidebar-link">mapState</a></li><li class="sidebar-sub-header"><a indepth="true" href="default_001.html#mapgetters" class="sidebar-link">mapGetters</a></li><li class="sidebar-sub-header"><a indepth="true" href="default_001.html#mapactions" class="sidebar-link">mapActions</a></li><li class="sidebar-sub-header"><a indepth="true" href="default_001.html#mapmutations" class="sidebar-link">mapMutations</a></li><li class="sidebar-sub-header"><a indepth="true" href="default_001.html#createnamespacedhelpers" class="sidebar-link">createNamespacedHelpers</a></li></ul></li></ul></div></li></ul> </div> <div class="page"> <div class="content"><h1 id="api-参考"><a href="#api-参考" aria-hidden="true" class="header-anchor">#</a> API 参考</h1> <h2 id="vuex-store"><a href="#vuex-store" aria-hidden="true" class="header-anchor">#</a> Vuex.Store</h2> <div class="language-js extra-class"><pre class="language-js"><code><span class="token keyword">import</span> Vuex <span class="token keyword">from</span> <span class="token string">'vuex'</span>

<span class="token keyword">const</span> store <span class="token operator">=</span> <span class="token keyword">new</span> <span class="token class-name">Vuex<span class="token punctuation">.</span>Store</span><span class="token punctuation">(</span><span class="token punctuation">{</span> <span class="token operator">...</span>options <span class="token punctuation">}</span><span class="token punctuation">)</span>
</code></pre></div><h2 id="vuex-store-构造器选项"><a href="#vuex-store-构造器选项" aria-hidden="true" class="header-anchor">#</a> Vuex.Store 构造器选项</h2> <h3 id="state"><a href="#state" aria-hidden="true" class="header-anchor">#</a> state</h3> <ul><li><p>类型: <code>Object | Function</code></p> <p>Vuex store 实例的根 state 对象。<a indepth="true" href="state.html">详细介绍</a></p> <p>如果你传入返回一个对象的函数，其返回的对象会被用作根 state。这在你想要重用 state 对象，尤其是对于重用 module 来说非常有用。<a indepth="true" href="modules.html#æ¨¡åéç¨">详细介绍</a></p></li></ul> <h3 id="mutations"><a href="#mutations" aria-hidden="true" class="header-anchor">#</a> mutations</h3> <ul><li><p>类型: <code>{ [type: string]: Function }</code></p> <p>在 store 上注册 mutation，处理函数总是接受 <code>state</code> 作为第一个参数（如果定义在模块中，则为模块的局部状态），<code>payload</code> 作为第二个参数（可选）。</p> <p><a indepth="true" href="mutations.html">详细介绍</a></p></li></ul> <h3 id="actions"><a href="#actions" aria-hidden="true" class="header-anchor">#</a> actions</h3> <ul><li><p>类型: <code>{ [type: string]: Function }</code></p> <p>在 store 上注册 action。处理函数总是接受 <code>context</code> 作为第一个参数，<code>payload</code> 作为第二个参数（可选）。</p> <p><code>context</code> 对象包含以下属性：</p> <div class="language-js extra-class"><pre class="language-js"><code><span class="token punctuation">{</span>
  state<span class="token punctuation">,</span>      <span class="token comment">// 等同于 `store.state`，若在模块中则为局部状态</span>
  rootState<span class="token punctuation">,</span>  <span class="token comment">// 等同于 `store.state`，只存在于模块中</span>
  commit<span class="token punctuation">,</span>     <span class="token comment">// 等同于 `store.commit`</span>
  dispatch<span class="token punctuation">,</span>   <span class="token comment">// 等同于 `store.dispatch`</span>
  getters<span class="token punctuation">,</span>    <span class="token comment">// 等同于 `store.getters`</span>
  rootGetters <span class="token comment">// 等同于 `store.getters`，只存在于模块中</span>
<span class="token punctuation">}</span>
</code></pre></div><p>同时如果有第二个参数 <code>payload</code> 的话也能够接收。</p> <p><a indepth="true" href="actions.html">详细介绍</a></p></li></ul> <h3 id="getters"><a href="#getters" aria-hidden="true" class="header-anchor">#</a> getters</h3> <ul><li>类型: <code>{ [key: string]: Function }</code></li></ul> <p>在 store 上注册 getter，getter 方法接受以下参数：</p> <div class="language- extra-class"><pre class="language-text"><code>state,     // 如果在模块中定义则为模块的局部状态
getters,   // 等同于 store.getters
</code></pre></div><p>当定义在一个模块里时会特别一些：</p> <div class="language- extra-class"><pre class="language-text"><code>state,       // 如果在模块中定义则为模块的局部状态
getters,     // 等同于 store.getters
rootState    // 等同于 store.state
rootGetters  // 所有 getters
</code></pre></div><p>注册的 getter 暴露为 <code>store.getters</code>。</p> <p><a indepth="true" href="getters.html">详细介绍</a></p> <h3 id="modules"><a href="#modules" aria-hidden="true" class="header-anchor">#</a> modules</h3> <ul><li><p>类型: <code>Object</code></p> <p>包含了子模块的对象，会被合并到 store，大概长这样：</p> <div class="language-js extra-class"><pre class="language-js"><code><span class="token punctuation">{</span>
  key<span class="token punctuation">:</span> <span class="token punctuation">{</span>
    state<span class="token punctuation">,</span>
    namespaced<span class="token operator">?</span><span class="token punctuation">,</span>
    mutations<span class="token punctuation">,</span>
    actions<span class="token operator">?</span><span class="token punctuation">,</span>
    getters<span class="token operator">?</span><span class="token punctuation">,</span>
    modules<span class="token operator">?</span>
  <span class="token punctuation">}</span><span class="token punctuation">,</span>
  <span class="token operator">...</span>
<span class="token punctuation">}</span>
</code></pre></div><p>与根模块的选项一样，每个模块也包含 <code>state</code> 和 <code>mutations</code> 选项。模块的状态使用 key 关联到 store 的根状态。模块的 mutation 和 getter 只会接收 module 的局部状态作为第一个参数，而不是根状态，并且模块 action 的 <code>context.state</code> 同样指向局部状态。</p> <p><a indepth="true" href="modules.html">详细介绍</a></p></li></ul> <h3 id="plugins"><a href="#plugins" aria-hidden="true" class="header-anchor">#</a> plugins</h3> <ul><li><p>类型: <code>Array&lt;Function&gt;</code></p> <p>一个数组，包含应用在 store 上的插件方法。这些插件直接接收 store 作为唯一参数，可以监听 mutation（用于外部地数据持久化、记录或调试）或者提交 mutation （用于内部数据，例如 websocket 或 某些观察者）</p> <p><a indepth="true" href="plugins.html">详细介绍</a></p></li></ul> <h3 id="strict"><a href="#strict" aria-hidden="true" class="header-anchor">#</a> strict</h3> <ul><li><p>类型: <code>Boolean</code></p></li> <li><p>默认值: <code>false</code></p> <p>使 Vuex store 进入严格模式，在严格模式下，任何 mutation 处理函数以外修改 Vuex state 都会抛出错误。</p> <p><a indepth="true" href="strict.html">详细介绍</a></p></li></ul> <h3 id="devtools"><a href="#devtools" aria-hidden="true" class="header-anchor">#</a> devtools</h3> <ul><li><p>类型：<code>Boolean</code></p> <p>为某个特定的 Vuex 实例打开或关闭 devtools。对于传入 <code>false</code> 的实例来说 Vuex store 不会订阅到 devtools 插件。可用于一个页面中有多个 store 的情况。</p> <div class="language-js extra-class"><pre class="language-js"><code><span class="token punctuation">{</span>
  devtools<span class="token punctuation">:</span> <span class="token boolean">false</span>
<span class="token punctuation">}</span>
</code></pre></div></li></ul> <h2 id="vuex-store-实例属性"><a href="#vuex-store-实例属性" aria-hidden="true" class="header-anchor">#</a> Vuex.Store 实例属性</h2> <h3 id="state-2"><a href="#state-2" aria-hidden="true" class="header-anchor">#</a> state</h3> <ul><li><p>类型: <code>Object</code></p> <p>根状态，只读。</p></li></ul> <h3 id="getters-2"><a href="#getters-2" aria-hidden="true" class="header-anchor">#</a> getters</h3> <ul><li><p>类型: <code>Object</code></p> <p>暴露出注册的 getter，只读。</p></li></ul> <h2 id="vuex-store-实例方法"><a href="#vuex-store-实例方法" aria-hidden="true" class="header-anchor">#</a> Vuex.Store 实例方法</h2> <h3 id="commit"><a href="#commit" aria-hidden="true" class="header-anchor">#</a> commit</h3> <ul><li><p><code>commit(type: string, payload?: any, options?: Object)</code></p></li> <li><p><code>commit(mutation: Object, options?: Object)</code></p> <p>提交 mutation。<code>options</code> 里可以有 <code>root: true</code>，它允许在<a indepth="true" href="modules.html#å½åç©ºé´">命名空间模块</a>里提交根的 mutation。<a indepth="true" href="mutations.html">详细介绍</a></p></li></ul> <h3 id="dispatch"><a href="#dispatch" aria-hidden="true" class="header-anchor">#</a> dispatch</h3> <ul><li><p><code>dispatch(type: string, payload?: any, options?: Object)</code></p></li> <li><p><code>dispatch(action: Object, options?: Object)</code></p> <p>分发 action。<code>options</code> 里可以有 <code>root: true</code>，它允许在<a indepth="true" href="modules.html#å½åç©ºé´">命名空间模块</a>里分发根的 action。返回一个解析所有被触发的 action 处理器的 Promise。<a indepth="true" href="actions.html">详细介绍</a></p></li></ul> <h3 id="replacestate"><a href="#replacestate" aria-hidden="true" class="header-anchor">#</a> replaceState</h3> <ul><li><code>replaceState(state: Object)</code></li></ul> <p>替换 store 的根状态，仅用状态合并或时光旅行调试。</p> <h3 id="watch"><a href="#watch" aria-hidden="true" class="header-anchor">#</a> watch</h3> <ul><li><code>watch(fn: Function, callback: Function, options?: Object): Function</code></li></ul> <p>响应式地侦听 <code>fn</code> 的返回值，当值改变时调用回调函数。<code>fn</code> 接收 store 的 state 作为第一个参数，其 getter 作为第二个参数。最后接收一个可选的对象参数表示 Vue 的 <a href="https://cn.vuejs.org/v2/api/#vm-watch" target="_top" rel="noopener noreferrer"><code>vm.$watch</code><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg></a> 方法的参数。</p> <p>要停止侦听，调用此方法返回的函数即可停止侦听。</p> <h3 id="subscribe"><a href="#subscribe" aria-hidden="true" class="header-anchor">#</a> subscribe</h3> <ul><li><p><code>subscribe(handler: Function): Function</code></p> <p>订阅 store 的 mutation。<code>handler</code> 会在每个 mutation 完成后调用，接收 mutation 和经过 mutation 后的状态作为参数：</p> <div class="language-js extra-class"><pre class="language-js"><code>store<span class="token punctuation">.</span><span class="token function">subscribe</span><span class="token punctuation">(</span><span class="token punctuation">(</span>mutation<span class="token punctuation">,</span> state<span class="token punctuation">)</span> <span class="token operator">=&gt;</span> <span class="token punctuation">{</span>
  console<span class="token punctuation">.</span><span class="token function">log</span><span class="token punctuation">(</span>mutation<span class="token punctuation">.</span>type<span class="token punctuation">)</span>
  console<span class="token punctuation">.</span><span class="token function">log</span><span class="token punctuation">(</span>mutation<span class="token punctuation">.</span>payload<span class="token punctuation">)</span>
<span class="token punctuation">}</span><span class="token punctuation">)</span>
</code></pre></div></li></ul> <p>要停止订阅，调用此方法返回的函数即可停止订阅。</p> <p>通常用于插件。<a indepth="true" href="plugins.html">详细介绍</a></p> <h3 id="subscribeaction"><a href="#subscribeaction" aria-hidden="true" class="header-anchor">#</a> subscribeAction</h3> <ul><li><p><code>subscribeAction(handler: Function): Function</code></p> <blockquote><p>2.5.0 新增</p></blockquote> <p>订阅 store 的 action。<code>handler</code> 会在每个 action 分发的时候调用并接收 action 描述和当前的 store 的 state 这两个参数：</p> <div class="language-js extra-class"><pre class="language-js"><code>store<span class="token punctuation">.</span><span class="token function">subscribeAction</span><span class="token punctuation">(</span><span class="token punctuation">(</span>action<span class="token punctuation">,</span> state<span class="token punctuation">)</span> <span class="token operator">=&gt;</span> <span class="token punctuation">{</span>
  console<span class="token punctuation">.</span><span class="token function">log</span><span class="token punctuation">(</span>action<span class="token punctuation">.</span>type<span class="token punctuation">)</span>
  console<span class="token punctuation">.</span><span class="token function">log</span><span class="token punctuation">(</span>action<span class="token punctuation">.</span>payload<span class="token punctuation">)</span>
<span class="token punctuation">}</span><span class="token punctuation">)</span>
</code></pre></div><p>要停止订阅，调用此方法返回的函数即可停止订阅。</p> <blockquote><p>3.1.0 新增</p></blockquote> <p>从 3.1.0 起，<code>subscribeAction</code> 也可以指定订阅处理函数的被调用时机应该在一个 action 分发<em>之前</em>还是<em>之后</em> (默认行为是<em>之前</em>)：</p> <div class="language-js extra-class"><pre class="language-js"><code>store<span class="token punctuation">.</span><span class="token function">subscribeAction</span><span class="token punctuation">(</span><span class="token punctuation">{</span>
  before<span class="token punctuation">:</span> <span class="token punctuation">(</span>action<span class="token punctuation">,</span> state<span class="token punctuation">)</span> <span class="token operator">=&gt;</span> <span class="token punctuation">{</span>
    console<span class="token punctuation">.</span><span class="token function">log</span><span class="token punctuation">(</span><span class="token template-string"><span class="token string">`before action </span><span class="token interpolation"><span class="token interpolation-punctuation punctuation">${</span>action<span class="token punctuation">.</span>type<span class="token interpolation-punctuation punctuation">}</span></span><span class="token string">`</span></span><span class="token punctuation">)</span>
  <span class="token punctuation">}</span><span class="token punctuation">,</span>
  after<span class="token punctuation">:</span> <span class="token punctuation">(</span>action<span class="token punctuation">,</span> state<span class="token punctuation">)</span> <span class="token operator">=&gt;</span> <span class="token punctuation">{</span>
    console<span class="token punctuation">.</span><span class="token function">log</span><span class="token punctuation">(</span><span class="token template-string"><span class="token string">`after action </span><span class="token interpolation"><span class="token interpolation-punctuation punctuation">${</span>action<span class="token punctuation">.</span>type<span class="token interpolation-punctuation punctuation">}</span></span><span class="token string">`</span></span><span class="token punctuation">)</span>
  <span class="token punctuation">}</span>
<span class="token punctuation">}</span><span class="token punctuation">)</span>
</code></pre></div><p>该功能常用于插件。<a indepth="true" href="plugins.html">详细介绍</a></p></li></ul> <h3 id="registermodule"><a href="#registermodule" aria-hidden="true" class="header-anchor">#</a> registerModule</h3> <ul><li><p><code>registerModule(path: string | Array&lt;string&gt;, module: Module, options?: Object)</code></p> <p>注册一个动态模块。<a indepth="true" href="modules.html#æ¨¡åå¨ææ³¨å">详细介绍</a></p> <p><code>options</code> 可以包含 <code>preserveState: true</code> 以允许保留之前的 state。用于服务端渲染。</p></li></ul> <h3 id="unregistermodule"><a href="#unregistermodule" aria-hidden="true" class="header-anchor">#</a> unregisterModule</h3> <ul><li><p><code>unregisterModule(path: string | Array&lt;string&gt;)</code></p> <p>卸载一个动态模块。<a indepth="true" href="modules.html#æ¨¡åå¨ææ³¨å">详细介绍</a></p></li></ul> <h3 id="hotupdate"><a href="#hotupdate" aria-hidden="true" class="header-anchor">#</a> hotUpdate</h3> <ul><li><p><code>hotUpdate(newOptions: Object)</code></p> <p>热替换新的 action 和 mutation。<a indepth="true" href="hot-reload.html">详细介绍</a></p></li></ul> <h2 id="组件绑定的辅助函数"><a href="#组件绑定的辅助函数" aria-hidden="true" class="header-anchor">#</a> 组件绑定的辅助函数</h2> <h3 id="mapstate"><a href="#mapstate" aria-hidden="true" class="header-anchor">#</a> mapState</h3> <ul><li><p><code>mapState(namespace?: string, map: Array&lt;string&gt; | Object&lt;string | function&gt;): Object</code></p> <p>为组件创建计算属性以返回 Vuex store 中的状态。<a indepth="true" href="state.html#mapstate-è¾å©å½æ°">详细介绍</a></p> <p>第一个参数是可选的，可以是一个命名空间字符串。<a indepth="true" href="modules.html#å¸¦å½åç©ºé´çç»å®å½æ°">详细介绍</a></p> <p>对象形式的第二个参数的成员可以是一个函数。<code>function(state: any)</code></p></li></ul> <h3 id="mapgetters"><a href="#mapgetters" aria-hidden="true" class="header-anchor">#</a> mapGetters</h3> <ul><li><p><code>mapGetters(namespace?: string, map: Array&lt;string&gt; | Object&lt;string&gt;): Object</code></p> <p>为组件创建计算属性以返回 getter 的返回值。<a indepth="true" href="getters.html#mapgetters-è¾å©å½æ°">详细介绍</a></p> <p>第一个参数是可选的，可以是一个命名空间字符串。<a indepth="true" href="modules.html#å¸¦å½åç©ºé´çç»å®å½æ°">详细介绍</a></p></li></ul> <h3 id="mapactions"><a href="#mapactions" aria-hidden="true" class="header-anchor">#</a> mapActions</h3> <ul><li><p><code>mapActions(namespace?: string, map: Array&lt;string&gt; | Object&lt;string | function&gt;): Object</code></p> <p>创建组件方法分发 action。<a indepth="true" href="actions.html#å¨ç»ä»¶ä¸­åå-action">详细介绍</a></p> <p>第一个参数是可选的，可以是一个命名空间字符串。<a indepth="true" href="modules.html#å¸¦å½åç©ºé´çç»å®å½æ°">详细介绍</a></p> <p>对象形式的第二个参数的成员可以是一个函数。<code>function(dispatch: function, ...args: any[])</code></p></li></ul> <h3 id="mapmutations"><a href="#mapmutations" aria-hidden="true" class="header-anchor">#</a> mapMutations</h3> <ul><li><p><code>mapMutations(namespace?: string, map: Array&lt;string&gt; | Object&lt;string | function&gt;): Object</code></p> <p>创建组件方法提交 mutation。<a indepth="true" href="mutations.html#å¨ç»ä»¶ä¸­æäº¤-mutation">详细介绍</a></p> <p>第一个参数是可选的，可以是一个命名空间字符串。<a indepth="true" href="modules.html#å¸¦å½åç©ºé´çç»å®å½æ°">详细介绍</a></p> <p>对象形式的第二个参数的成员可以是一个函数。<code>function(commit: function, ...args: any[])</code></p></li></ul> <h3 id="createnamespacedhelpers"><a href="#createnamespacedhelpers" aria-hidden="true" class="header-anchor">#</a> createNamespacedHelpers</h3> <ul><li><p><code>createNamespacedHelpers(namespace: string): Object</code></p> <p>创建基于命名空间的组件绑定辅助函数。其返回一个包含 <code>mapState</code>、<code>mapGetters</code>、<code>mapActions</code> 和 <code>mapMutations</code> 的对象。它们都已经绑定在了给定的命名空间上。<a indepth="true" href="modules.html#å¸¦å½åç©ºé´çç»å®å½æ°">详细介绍</a></p></li></ul></div> <div class="page-edit"><!----> <!----></div> <!----> <div class="bsa-cpc-wrapper"><div class="bsa-cpc"></div></div></div> <!----></div></div>
    
  



</body></html>
